import { Component, ReactNode } from "react";
import { View, Text } from "@tarojs/components";
import { AtAvatar, AtButton } from "taro-ui";
import avatar from "../../assets/avatar.png";
import "./index.scss";
import Taro from "@tarojs/taro";
import { getInfo } from "../../utils/auth";
export default class MyInfo extends Component {
  state = {
    list: [
      {
        label: "区域",
        value: "/",
        prop: "areaName",
      },
      {
        label: "公司名称",
        value: "/",
        prop: "title",
      },
      {
        label: "公司地址",
        value: "/",
        prop: "address",
      },
      {
        label: "法人",
        value: "/",
        prop: "contacts",
      },
      // {
      //   label: "联系电话",
      //   value: "/",
      //   prop: "phone",
      // },
    ],
    info: getInfo().company,
  };
  get isCanEdit() {
    const user_info = getInfo();
    if (user_info?.roles && user_info.roles.length) {
      if (user_info.roles[0].roleKey === "company_admin") {
        return true;
      }
    }
    return false;
  }
  componentDidMount(): void {
    this.initData();
  }
  componentDidShow(){
    this.setState({
      info:getInfo()?.company ?? {}
    })
  }
  goToDetail = () => {
    Taro.navigateTo({
      url: "/pages/my-info-form/index",
    });
  };
  initData = () => {};
  render(): ReactNode {
    const { info } = this.state;
    return (
      <View className="my-info-container">
        <AtAvatar image={avatar} circle className="my-info-avatar" />
        <View className="my-info-list">
          {this.state.list.map((item) => (
            <View className="my-info-item">
              <Text className="my-info-label">{item.label}</Text>
              <Text className="my-info-value">
                {info[item.prop] ?? item.value}
              </Text>
            </View>
          ))}
        </View>
        {this.isCanEdit && (
          <AtButton
            onClick={() => {
              this.goToDetail();
            }}
            className="my-info-edit-btn primary-btn-color"
            type="primary"
            circle
          >
            编辑
          </AtButton>
        )}
      </View>
    );
  }
}
